<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="../swee/sweetalert.css">
    <script src="../swee/sweetalert-dev.js"></script>
    <script src="../layui-v2.6.5/layui/layui.js"></script>
    <link rel="stylesheet" href="../layui-v2.6.5/layui/css/layui.css">

</head>
<body>

<div id="QQQ">你在哪</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>实例调用</legend>
</fieldset>
<div class="layui-btn-container">
    <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
    <button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
</div>

<div id="test7" class="demo-transfer"></div>



<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    var getDataa=null
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;


        //模拟数据
        var data1 = [
            {"value": "1", "title": "李白"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅", "disabled": true}
            ,{"value": "6", "title": "巴金"}
            ,{"value": "7", "title": "冰心"}
            ,{"value": "8", "title": "矛盾"}
            ,{"value": "9", "title": "贤心"}
        ]
        //基础效果
        transfer.render({
            elem: '#test1'
            ,data: data1
        })
        //定义标题及数据源
        transfer.render({
            elem: '#test2'
            ,title: ['候选文人', '获奖文人']  //自定义标题
            ,data: data1
            //,width: 150 //定义宽度
            ,height: 210 //定义高度
        })
        //显示搜索框
        // transfer.render({
        //     elem: '#test4'
        //     ,data: data1
        //     ,title: ['文本墨客', '获奖文人']
        //     ,showSearch: true
        // })

        //数据格式解析
        // transfer.render({
        //     elem: '#test5'
        //     ,parseData: function(res){
        //         return {
        //             "value": res.id //数据值
        //             ,"title": res.name //数据标题
        //             ,"disabled": res.disabled  //是否禁用
        //             ,"checked": res.checked //是否选中
        //         }
        //     }
        //     ,data: [
        //         {"id": "1", "name": "李白"}
        //         ,{"id": "2", "name": "杜甫"}
        //         ,{"id": "3", "name": "贤心"}
        //     ]
        //     ,height: 150
        // })

        //穿梭时的回调
        // transfer.render({
        //     elem: '#test6'
        //     ,data: data1
        //     ,onchange: function(obj, index){
        //         var arr = ['左边', '右边'];
        //         layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
        //     }
        // })

        //实例调用
        transfer.render({
            elem: '#test7'
            ,data: data1
            ,id: 'key123' //定义唯一索引
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                getDataa = transfer.getData('key123'); //获取右侧数据
                layer.alert(JSON.stringify(getDataa));
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    title: ['文人', '喜欢的文人']
                    ,value: []
                    ,showSearch: true
                })
            }
        });
        $(function (){
            $("#QQQ").click(function (){
                console.log(getDataa)
                alert(getDataa[0].title)
            })
        })

    });
</script>










<form class="layui-form" action="">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
    <select name="modules" lay-verify="required" lay-search="">

    </select>
</div>
</form>
<span class="qq">
llll
</span>
<script type="text/javascript">
    $(".qq").click(function (){
        swal({
                title: "确定删除吗？",
                text: "你将无法恢复该虚拟文件！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定删除！",
                cancelButtonText: "取消删除！",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function(isConfirm){
                if (isConfirm) {
                    swal("删除！", "你的虚拟文件已经被删除。",
                        "success");
                } else {
                    swal("取消！", "你的虚拟文件是安全的:)",
                        "error");
                }
            });
    })
</script>

<!--<script>-->
<!--    layui.use(['form', 'layedit', 'laydate'], function(){-->
<!--        var form = layui.form-->
<!--            ,layer = layui.layer-->
<!--            ,layedit = layui.layedit-->
<!--            ,laydate = layui.laydate;-->

<!--        //日期-->
<!--        laydate.render({-->
<!--            elem: '#date'-->
<!--        });-->
<!--        laydate.render({-->
<!--            elem: '#date1'-->
<!--        });-->

<!--        //创建一个编辑器-->
<!--        var editIndex = layedit.build('LAY_demo_editor');-->

<!--        //自定义验证规则-->
<!--        form.verify({-->
<!--            title: function(value){-->
<!--                if(value.length < 5){-->
<!--                    return '标题至少得5个字符啊';-->
<!--                }-->
<!--            }-->
<!--            ,pass: [-->
<!--                /^[\S]{6,12}$/-->
<!--                ,'密码必须6到12位，且不能出现空格'-->
<!--            ]-->
<!--            ,content: function(value){-->
<!--                layedit.sync(editIndex);-->
<!--            }-->
<!--        });-->

<!--        //监听指定开关-->
<!--        form.on('switch(switchTest)', function(data){-->
<!--            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {-->
<!--                offset: '6px'-->
<!--            });-->
<!--            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)-->
<!--        });-->

<!--        //监听提交-->
<!--        form.on('submit(demo1)', function(data){-->
<!--            layer.alert(JSON.stringify(data.field), {-->
<!--                title: '最终的提交信息'-->
<!--            })-->
<!--            return false;-->
<!--        });-->

<!--        //表单赋值-->
<!--        layui.$('#LAY-component-form-setval').on('click', function(){-->
<!--            form.val('example', {-->
<!--                "username": "贤心" // "name": "value"-->
<!--                ,"password": "123456"-->
<!--                ,"interest": 1-->
<!--                ,"like[write]": true //复选框选中状态-->
<!--                ,"close": true //开关状态-->
<!--                ,"sex": "女"-->
<!--                ,"desc": "我爱 layui"-->
<!--            });-->
<!--        });-->

<!--        //表单取值-->
<!--        layui.$('#LAY-component-form-getval').on('click', function(){-->
<!--            var data = form.val('example');-->
<!--            alert(JSON.stringify(data));-->
<!--        });-->

<!--    });-->
<!--</script>-->



</body>
</html>